<div id="content" class="sa-outlook-content">
  <div class="inbox-nav-bar no-content-padding">

    <h1 class="page-title txt-color-blueDark hidden-tablet"><i class="fa fa-fw fa-inbox"></i> Inbox </h1>

    <div class="btn-group visible-tablet" dropdown>
      <button class="btn btn-default dropdown-toggle" dropdownToggle>
        {{activeFolder?.name}} <i class="fa fa-caret-down"></i>
      </button>
      <ul class="dropdown-menu" *dropdownMenu>
        <li [class.active]="folder.key == activeFolder.key" *ngFor="let folder of outlook.folders">
          <a [routerLink]="[folder.key]">{{folder.name}} <i
            *ngIf="folder.key == activeFolder.key" class="fa fa-check"></i></a>
        </li>
      </ul>

    </div>

    <div class="inbox-checkbox-triggered">

      <div class="btn-group">
        <a placement="bottom"
           tooltip="Mark Important" class="btn btn-default"><strong><i
          class="fa fa-exclamation fa-lg text-danger"></i></strong></a>
        <a placement="bottom"
           tooltip="Move to folder" class="btn btn-default"><strong><i
          class="fa fa-folder-open fa-lg"></i></strong></a>
        <a (click)="deleteSelected()" placement="bottom"
           tooltip="Delete" class="deletebutton btn btn-default"><strong><i
          class="fa fa-trash-o fa-lg"></i></strong></a>
      </div>

    </div>

    <a id="compose-mail-mini"
       class="btn btn-primary pull-right hidden-desktop visible-tablet"> <strong><i
      class="fa fa-file fa-lg"></i></strong> </a>

    <div class="btn-group pull-right inbox-paging">
      <a class="btn btn-default btn-sm"><strong><i
        class="fa fa-chevron-left"></i></strong></a>
      <a class="btn btn-default btn-sm"><strong><i
        class="fa fa-chevron-right"></i></strong></a>
    </div>
    <span class="pull-right"><strong>1-30</strong> of <strong>{{activeFolder.total}}</strong></span>

  </div>

  <div id="inbox-content" class="inbox-body no-content-padding">

    <div class="inbox-side-bar">

      <a [routerLink]="['compose']" id="compose-mail" class="btn btn-primary btn-block">
        <strong>Compose</strong> </a>

      <h6> Folder <a tooltip="Refresh" placement="right" class="pull-right txt-color-darken"><i
        class="fa fa-refresh"></i></a></h6>

      <ul class="inbox-menu-lg">
        <li [class.active]="folder.key == activeFolder.key" *ngFor="let folder of outlook.folders">
          <a [routerLink]="[folder.key]"> {{folder.name}} <span *ngIf="folder.unread">({{folder.unread}})</span>
          </a>

        </li>
      </ul>

      <h6> Quick Access <a placement="right"
                           data-tooltip="Add Another" class="pull-right txt-color-darken"><i
        class="fa fa-plus"></i></a></h6>

      <ul class="inbox-menu-sm">
        <li *ngFor="let label of outlook.labels">
          <a>{{label.name}} ({{label.total}})</a>
        </li>
      </ul>

      <div class="air air-bottom inbox-space" *ngIf="outlook.space">

        {{outlook.space.free}} of <strong>{{outlook.space.total}}</strong><a data-tooltip="Empty Spam"
                                                                             data-placement="top"
                                                                             class="pull-right txt-color-darken"><i
        class="fa fa-trash-o fa-lg"></i></a>


        <div class="progress-micro">
          <progressbar value="{{outlook.space.ratio}}"></progressbar>
        </div>

      </div>

    </div>


    <router-outlet></router-outlet>

    <div class="inbox-footer">

      <div class="row">

        <div class="col-xs-6 col-sm-1">

          <div class="txt-color-white hidden-desktop visible-mobile" *ngIf="outlook.space">
            {{outlook.space.free}} of <strong>{{outlook.space.total}}</strong>
            <div class="progress-micro">
              <progressbar value="{{outlook.space.ratio}}"></progressbar>
            </div>
          </div>
        </div>

        <div class="col-xs-6 col-sm-11 text-right">
          <div class="txt-color-white inline-block">
            <i class="txt-color-blueLight hidden-mobile">Last account activity <i
              class="fa fa-clock-o"></i> 52 mins ago |</i> Displaying <strong>44 of 259</strong>
          </div>
        </div>

      </div>

    </div>

  </div>


</div>
